<script lang="ts" setup>
import { onMounted, watch } from 'vue'
import { isFullyVisible, } from "@/utils"
import { nextTick } from 'process';
const props = withDefaults(defineProps<{
  modelValue: boolean,
  msg: string,
  position: Array<number>
}>(), { modelValue: false, msg: '', position: () => [0, 0] })
onMounted(() => {
})
watch(() => [props.modelValue, props.position], () => {
  if (props.modelValue) {
    setTimeout(() => {
      let e = document.getElementById('rightMenuContainer') as HTMLElement
      if (!e) return
      let eSize = e.getBoundingClientRect()
      if (e) {
        let notOut = isFullyVisible(e, { height: window.innerHeight, width: window.innerWidth })
        if (!notOut) {
          e.style.top = (props.position[1] - eSize.height - 30) + 'px'
          e.classList.add('modified-after');
          e.style.setProperty('--after-top', (eSize.height - 10) + 'px')
        } else {
          e.classList.remove('modified-after');
          e.style.setProperty('--after-top', '0px')
        }
      }
    }, 0)
  }

}, {
  immediate: true
})
</script>

<template>
  <div v-if="modelValue" :style="{ 'left': position[0] + 'px', 'top': position[1] + 'px', }" id="rightMenuContainer"
    class='container'>
    <div class="containerContent" tabindex="0">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  --after-top: 0px;
  position: absolute;
  width: 150px;
  height: fit-content;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: var(--max-index);
  transform: translate(-50%, 20px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.11);

  &Content {
    position: relative;
    left: 0;
    z-index: var(--max-index);
    width: 100%;
    border-radius: 4px;
    background-color: white;
  }

  &:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 1px solid #ccc;
    background-color: white;
    top: var(--after-top);
    left: 50%;
    transform: rotate(45deg) translateX(-50%);
    z-index: 0;

  }
}
</style>